<template>
  <div class="cont">
    <g-button class="button">默认按钮</g-button>
    <g-button class="button" @click="dd" type="primary">主要按钮</g-button>
    <g-button class="button" type="info">信息按钮</g-button>
    <g-button class="button" type="danger">危险按钮</g-button>
    <g-button class="button" type="warning">警告按钮</g-button>
    <br />
    <g-button loading size="normal" class="button" type="info" />
    <g-button loading size="normal" class="button" type="info" loading-text="加载中" />
      <br />
    <g-button
      loading
      size="normal"
      class="button"
      type="info"
      loading-text="加载中"
      loading-type="spinner"
    >普通按钮</g-button>
    <br />
    <g-button color="linear-gradient(to right, #ff6034, #ee0a24)" class="button">渐变色按钮</g-button>
    <g-button type="primary" url="/button">url跳转</g-button>
    <g-button type="primary" replace to="/">路由跳转</g-button>
    <br />
    <g-button icon="zantong" size="normal" class="button" type="info" />
    <g-button icon="kefu" size="normal" class="button" type="info">在线客服</g-button>
     <br />
    <g-button
      icon="https://img.yzcdn.cn/vant/user-active.png"
      size="normal"
      class="button"
      type="info"
    >会员</g-button>
    <br />
    <g-button size="large" type="info">大号按钮</g-button>
    <g-button size="normal" class="button" type="info">普通按钮</g-button>
    <g-button size="small" class="button" type="info">小号按钮</g-button>
    <g-button size="mini" class="button" type="info">迷你按钮</g-button>
    <br />
    <g-button type="danger" class="button" plain>朴素按钮</g-button>
    <g-button type="info" class="button" plain>朴素按钮</g-button>
    <br />
    <g-button type="danger" class="button" plain hairline>细边框</g-button>
    <g-button type="info" class="button" plain hairline>细边框</g-button>
    <br />
    <g-button disabled type="danger" class="button" plain>禁用状态</g-button>
    <g-button disabled type="info" class="button" plain>禁用状态</g-button>
  </div>
   <g-tabbar route :active="active">
        <g-tabbar-item  to="/" icon="shouye">首页</g-tabbar-item>
        <g-tabbar-item to="/icon" icon="dingdan">图标</g-tabbar-item>
        <g-tabbar-item  to="/button" icon="zantong">按钮</g-tabbar-item>
        <g-tabbar-item to="/cell"  icon="leimu">单元格</g-tabbar-item>
    </g-tabbar>
</template>
<script>
import { reactive, computed, ref, onMounted, watch, toRefs } from "vue";

export default {
   data(){
    return{
      active:2
    }
  },
  props: {
    msg: {
      type: String
    },
    test: {
      type: String
    },
    ps: {
      type: String
    }
  },
  setup(props, { attrs, emit, slots }) {
    function dd(e) {
      alert(1);
      console.log(e);
    }
    return {
      dd
    };
  }
};
</script>
<style lang="scss"  scoped>
.cont {
  width: 720px;
  margin: 0 auto;
  padding-bottom:140px;
}
.button {
  margin: 10px !important;
}
.icon {
  margin: 0 10px;
  color: red;
}
</style>